<template>
  <view
    class="title-box"
    :class="{
      border: border,
    }"
    :style="{ padding: padding, backgroundColor: bgColor }"
    @click="handleClick"
  >
    <view
      id="tLeft"
      :class="{
        bold: bold,
      }"
      :style="{
        color: color,
        fontSize: size,
      }"
    >
      <text>{{ label }}</text>
      <view
        v-if="bottomColor"
        class="borderBottom"
        :style="{
          left: '0',
          bottom: bottom + 'rpx',
          width: bmWidth,
          height: bottomHeight + 'rpx',
          backgroundColor: bottomColor,
        }"
      ></view>
    </view>
    <view
      v-if="rightText && !$slots.right"
      class="title-right"
      :style="{
        color: rightColor,
      }"
      @click="handleRight"
    >
      {{ rightText }}
    </view>
    <slot name="right"></slot>
  </view>
</template>

<script>
export default {
  props: {
    // 标题文字
    label: {
      type: String,
      default: "",
      required: true,
    },
    // 标题颜色
    color: {
      type: String,
      default: "#222222",
    },
    // 背景颜色
    bgColor: {
      type: String,
      default: "transparent",
    },
    // 字体大小
    size: {
      type: String,
      default: "32rpx",
    },
    // 是否加粗
    bold: {
      type: [Boolean, String],
      default: true,
    },
    // 距离底部距离
    bottom: {
      type: [String, Number],
      default: 20,
    },
    // 下划线颜色
    bottomColor: {
      type: String,
      default: "",
    },
    // 下划线宽度 (rpx)
    bottomWidth: {
      type: [String, Number],
      default: "auto",
    },
    // 下划线高度 (rpx)
    bottomHeight: {
      type: [String, Number],
      default: 10,
    },
    // 下边框线
    border: {
      type: Boolean,
      default: false,
    },
    // 内边距
    padding: {
      type: String,
      default: "20rpx 0",
    },
    // 右侧文字 (优先级低于插槽)
    rightText: {
      type: String,
      default: "",
    },
    // 右侧字体颜色
    rightColor: {
      type: String,
      default: "#3BA199",
    },
  },
  data() {
    return {
      bmWidth: "",
    };
  },
  watch: {
    // 动态修改标题时改变宽度
    label() {
      this.setBottomWidth();
    },
  },
  mounted() {
    this.setBottomWidth();
  },
  methods: {
    setBottomWidth() {
      if (isNaN(Number(this.borderBottom))) {
        uni
          .createSelectorQuery()
          .in(this)
          .select("#tLeft")
          .boundingClientRect((rect) => {
            this.bmWidth = rect.width * 2 - 6 + "rpx";
          })
          .exec();
      } else {
        this.bmWidth = this.bottomWidth + "rpx";
      }
    },
    // 整行点击事件 (会覆盖右侧事件)
    handleClick() {
      this.$emit("click");
    },
    // 右侧事件
    handleRight() {
      this.$emit("clickRight");
    },
  },
};
</script>

<style lang="scss" scoped>
.title-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  text {
    position: relative;
    z-index: 1;
  }
  .borderBottom {
    position: absolute;
    left: 0;
    z-index: 0;
  }
  .title-right {
    font-size: 28rpx;
  }
}
.border {
  border-bottom: 1rpx solid #d9d9d999;
}
.bold {
  font-weight: 600;
}
</style>
